document.addEventListener('DOMContentLoaded', function() {
    // 头像预览功能
    const avatarInput = document.getElementById('avatarInput');
    const avatarPreview = document.getElementById('avatarPreview');

    avatarInput.addEventListener('change', function(e) {
        if (e.target.files && e.target.files[0]) {
            const reader = new FileReader();

            reader.onload = function(event) {
                avatarPreview.src = event.target.result;
            }

            reader.readAsDataURL(e.target.files[0]);
        }
    });

    // 初始化省市区选择器
    initRegionSelectors();

    // 表单提交验证
    const profileForm = document.getElementById('profileForm');
    if (profileForm) {
        profileForm.addEventListener('submit', function(e) {
            // 可以在这里添加表单验证逻辑
            // 例如：检查必填字段是否已填写

            // 如果验证不通过，可以阻止表单提交
            // e.preventDefault();
        });
    }
});

// 省市区三级联动功能
function initRegionSelectors() {
    const provinceSelect = document.getElementById('province');
    const citySelect = document.getElementById('city');
    const districtSelect = document.getElementById('district');

    // 初始化省份选项
    Object.keys(REGION_DATA).forEach(provinceCode => {
        const province = REGION_DATA[provinceCode];
        const option = document.createElement('option');
        option.value = provinceCode;
        option.textContent = province.name;

        // 设置当前选中的省份
        if (province.name === "{{ user.province|default:'' }}") {
            option.selected = true;
        }

        provinceSelect.appendChild(option);
    });

    // 省份变化时加载城市
    provinceSelect.addEventListener('change', function() {
        const provinceCode = this.value;
        citySelect.innerHTML = '<option value="">请选择城市</option>';
        districtSelect.innerHTML = '<option value="">请选择区县</option>';

        if (!provinceCode) {
            citySelect.disabled = true;
            districtSelect.disabled = true;
            return;
        }

        citySelect.disabled = false;
        const province = REGION_DATA[provinceCode];

        Object.keys(province.cities).forEach(cityCode => {
            const city = province.cities[cityCode];
            const option = document.createElement('option');
            option.value = cityCode;
            option.textContent = city.name;
            citySelect.appendChild(option);
        });
    });

    // 城市变化时加载区县
    citySelect.addEventListener('change', function() {
        const provinceCode = provinceSelect.value;
        const cityCode = this.value;
        districtSelect.innerHTML = '<option value="">请选择区县</option>';

        if (!cityCode) {
            districtSelect.disabled = true;
            return;
        }

        districtSelect.disabled = false;
        const city = REGION_DATA[provinceCode].cities[cityCode];

        Object.keys(city.districts).forEach(districtCode => {
            const district = city.districts[districtCode];
            const option = document.createElement('option');
            option.value = districtCode;
            option.textContent = district;
            districtSelect.appendChild(option);
        });
    });

    // 如果有初始值，触发change事件加载下级选项
    if (provinceSelect.value) {
        provinceSelect.dispatchEvent(new Event('change'));

        // 设置城市值（如果有）
        if ("{{ user.city|default:'' }}") {
            setTimeout(() => {
                citySelect.value = "{{ user.city|default:'' }}";
                citySelect.dispatchEvent(new Event('change'));

                // 设置区县值（如果有）
                if ("{{ user.district|default:'' }}") {
                    setTimeout(() => {
                        districtSelect.value = "{{ user.district|default:'' }}";
                    }, 100);
                }
            }, 100);
        }
    }
}